<template>
    <div class="template-index-Lu">
        <commpVxeTable
            :isCanWrap="true"
            :conditionBtnRow="true"
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @radioChange="selectedRowKeysChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template  v-slot:externalOperations="{data}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="usualnessApplyForAdd" icon="plus">新增</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="green-btn" @click="usualnessApplyForView(row)" icon="eye">查看</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fsfysq == '未申请'">
                        <a-button class="red-btn" @click="usualnessApplyForDel(row.id)" icon="delete">删除</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <a-modal
            :title="'经常性事务申请-'+ (isView?'查看':'新增')"
            :visible="visible"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="handleCancel"
            width="70%"
            :dialog-style="{ top: '50px' }"
            wrapClassName=""
            >
            <a-form v-if="visible" :form="form" ref="form" class="usualnessApplyFor-form-box">
                <a-descriptions title="" bordered style="width: 100%;">
                    <a-descriptions-item :span="3">
                        <span slot="label" class="descriptions-label-slot">
                            <span v-if="!isView" class="xhText">*</span>
                            申请内容
                        </span>
                        <a-form-item ref="fsqnr" prop="fsqnr" class="zm-form-model">
                            <a-textarea
                                v-if="!isView"
                                v-model="formState.fsqnr"
                                placeholder="请输入申请内容:"
                                :auto-size="{ minRows: 2}"
                                v-decorator="[
                                    'fsqnr', {initialValue:formState.fsqnr,rules: rules.fsqnr}]"/>
                            <span v-else>{{ formState.fsqnr }}</span>
                        </a-form-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="3">
                        <span slot="label" class="descriptions-label-slot">
                            申请依据
                        </span>
                        <a-form-item ref="fsqyj" prop="fsqyj" class="zm-form-model">
                            <a-textarea
                                v-if="!isView"
                                v-model="formState.fsqyj"
                                placeholder="请输入申请依据:"
                                :auto-size="{ minRows: 2}"/>
                            <span v-else>{{ formState.fsqyj }}</span>
                        </a-form-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="3">
                        <span slot="label" class="descriptions-label-slot">
                            附件
                        </span>
                        <a-form-item ref="ffj" prop="ffj" class="zm-form-model">
                            <uploadFilesList
                                :config="uploadFilesListConfig"
                                @emitFormid="emitFormid"
                                :filesFormState="{...formState}"/>
                        </a-form-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-form>
            <template slot="footer">
                <a-button v-if="!isView" class="" @click="handleCancel">取消添加</a-button>
                <a-button v-if="!isView" class="blue-btn" type="primary" @click="handleOk">确认添加</a-button>
                <a-button class="" @click="closeModal">关闭弹窗</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {
    jcxswsqAdd,
    jcxswsqDelete,
    jcxswsqEdit
} from './service/index'
import YchConstant from "@/api/YchConstant";
import uploadFilesList from '@/views/administrativeOffice-new/modal/uploadFilesList'
import assessCheckApi from './service/api.js'
export default {
    components: {
        commpVxeTable,
        uploadFilesList,
    },
    props: {
        getHeight: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: YchConstant.SPZX_OA + '/NkJcxswsq/list',
                rowId: 'id',
                urlType: true,
                paramet: {
                    fsfysq: this.getHeight? '未申请' : '' // 是否已申请报销
                },
                height: this.getHeight
            },
            columnsVxe: [
                {
                    type: 'radio',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '申请人',
                    field: 'fsqr',
                },{
                    title: '申请部门',
                    field: 'fsqbm',
                },{
                    title: '申请时间',
                    field: 'fsqsj',
                },{
                    title: '申请内容',
                    field: 'fsqnr',
                },{
                    title: '申请依据',
                    field: 'fsqyj',
                },{
                    title: '是否已申请报销',
                    field: 'fsfysq',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 200,
                    titleInterval:true,
                    slots: {
                    // 使用插槽模板渲染
                        header:'data3_header',
                        default: 'operation_btn',
                    },
                }
            ],
            formItem: [
                {
                    label: '申请人',
                    model: 'fsqr',
                },{
                    label: '申请报销状态',
                    model: 'fsfysq',
                    type:'Select',
                    options:[{
                        label:'未申请',
                        value:'未申请'
                    },{
                        label:'申请中',
                        value:'申请中'
                    },{
                        label:'已申请',
                        value:'已申请'
                    }]
                },
            ],
            idList: [],
            form:this.$form.createForm(this, { name: 'form' }),
            formState: {
                id: ''
            },
            rules:{
                fsqnr: [{
                    required: true,
                    message: '请输入申请内容',
                    trigger: 'blur',
                }],
                fsqyj: [{
                    required: true,
                    message: '请输入申请依据',
                    trigger: 'blur',
                }],
            },
            isView: false,
            visible: false,
            uploadFilesListConfig: {
                isUpload: false,
                fjAddApi: assessCheckApi.jcxswsqAdd,
            },
        }
    },
    watch: {

    },
    methods: {
        getData(val) {
                //console.log('111没有？？？',val)
            if(val){
                //console.log('222没有？？？',val)
                this.dataTableConfig.paramet.fsfysq = '未申请'
                this.reCommpVxeTable = Date.now()
            }
        },
        // 勾选
        selectedRowKeysChange(val){
            this.selectedRowKeysArr = []
            this.selectedRowKeysArr.push(val.newValue.id)
            this.$emit('usualnessApplyForKeysChange',this.selectedRowKeysArr)
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        emitFormid(val){
            //console.log('附件初始化结果===',val)
            this.formState = {...val}
        },
        usualnessApplyForAdd(){
            this.visible = true
            this.uploadFilesListConfig.isUpload = true
            //console.log('999999999999999999',this.uploadFilesListConfig)
        },
        usualnessApplyForView(row){
            this.visible = true
            this.formState = row
            this.isView = true
            this.uploadFilesListConfig.isUpload = false
        },
        usualnessApplyForDel(ids){
            var that = this
            that.$confirm({
                title:'您确认要删除吗？',
                onOk() {
                    jcxswsqDelete({ id:ids }).then(res => {
                        if(res.success){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.error(res.message)
                        }
                    })
                }
            })
        },
        handleOk(){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        let data = {
                            ...this.formState,
                            id: this.formState.id,
                        }
                        jcxswsqEdit(data).then(res => {
                            if(res.success){
                                this.reCommpVxeTable = Date.now()
                                this.$message.success(res.message)
                                this.closeModal()
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        var that = this
                        that.$confirm({
                            title:'您确认要新增吗？',
                            onOk() {
                                let data = {
                                    ...that.formState,
                                    id: ''
                                }
                                jcxswsqAdd(data).then(res => {
                                    if(res.success){
                                        that.reCommpVxeTable = Date.now()
                                        that.$message.success(res.message)
                                        that.closeModal()
                                    } else {
                                        that.$message.error(res.message)
                                    }
                                })
                            }
                        })
                    }

                }
            })
        },
        closeModal() {
            this.visible = false
            this.isView = false
            this.formState = {}
        },
        cancel() {
            //console.log('Cancel');
        },
        handleCancel(){
            if(this.isView){
                this.closeModal()
                return
            }
            var that = this
            that.$confirm({
                title:'您确认要取消新增吗？当前窗口关闭后将无法保存当前数据！',
                okText: '取消新增',
                cancelText: '继续填写',
                onOk() {
                    that.closeModal()
                }
            })
        }
    },
}
</script>
<style lang="less">
.usualnessApplyFor-form-box {
    padding: 0 15px;
    margin-top: 20px;
    .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: center;
        font-size: 16px;
        font-family:simHei !important;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;
        .ant-form-item {
            margin-bottom: 0 !important;
        }

    }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 120px !important;//确保左侧固定文字不会换行
        justify-content: center;
        text-align: center;
    }
    .xhText{
        color: #f5222d;
        line-height: 31px;
        font-size: 14px;
        font-weight: 600;
        height: 30px;
    }
    .descriptions-item-center{

    }
    .ant-form-inline .ant-form-item-with-help{
        margin-bottom: 0px !important;
    }
    .zm-form-model{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
        .ant-input-number {
            width: calc(100% - 40px);
        }
    }
    .ant-descriptions-bordered .ant-descriptions-row{
        border-bottom: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        border-right: 1px solid #e4e3e3;
        min-width: 100px;
    }
    .ant-descriptions-bordered .ant-descriptions-view{
        border: 1px solid #e4e3e3;
        border-right: 0;
    }
    .ant-descriptions-row:last-child{
        border-bottom: 0;
    }
    .ant-descriptions-title {
        margin-top: 20px;
        margin-bottom: 0px !important;
    }
    .vxe-table .ant-input-number {
        width: 100% !important;
    }
    .performance-table {
        margin: 10px 0px;
        .performance-table-title {
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
            font-size: 16px;
            line-height: 1.5;
            text-align: left;
        }
        .performance-table-body {
            border: 1px solid #e4e3e3;
            padding: 12px;
        }
    }
    .ant-collapse-extra {
        position: unset;
    }
}
</style>
